<template>
    <div id="bg">
        <el-card class="form-card">
            <template #header>
                <div class="card-header">
                    <span>注册账户</span>
                </div>
            </template>

            <el-form ref="ruleFormRef" :rules="rules" status-icon :model="form" label-width="80px">
                <el-form-item label="账号" prop="username">
                    <el-input v-model="form.username" />
                </el-form-item>
                <el-form-item label="密码" prop="pass">
                    <el-input v-model="form.password" type="password" autocomplete="off" />
                </el-form-item>

                <el-form-item label="名字" prop="name">
                    <el-input v-model="form.fullname" type="text" autocomplete="off" />
                </el-form-item>
                <el-form-item label="性别" prop="sex" autocomplete="off">
                    <el-radio label="男" v-model="form.sex" />
                    <el-radio label="女" v-model="form.sex" />
                </el-form-item>

                <el-form-item label="手机" prop="tel" autocomplete="off">
                    <el-input v-model="form.tel" type="text" />
                </el-form-item>

                <el-form-item>
                    <el-checkbox label="同意本站协议" v-model="form.isAgree" prop="isAgree" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="handleSubmit(ruleFormRef)" :disabled="!form.isAgree">注册
                    </el-button>
                </el-form-item>
            </el-form>
            <el-row justify="space-between">
                <el-col :span="5">
                    <el-link href="/#/" type="info">登录账号</el-link>
                </el-col>
                <el-col :span="5">
                    <el-link type="info">忘记密码?</el-link>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>
      
<script setup>
import { reactive, ref } from 'vue'
import Admin from '@/api/admin';
import { useRouter } from 'vue-router';
const form = reactive({
    username: '',
    password: '',
    checkPass: '',
    fullname: '',
    sex: '男',
    tel: '',
    isAgree: false,

})
const validatePass = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入密码'))
        return
    } else {
        if (form.checkPass !== '') {
            // if (!ruleFormRef.value) return
            ruleFormRef?.value?.validateField('checkPass', () => null)
        }
        callback()
    }
}

const ruleFormRef = ref();
const rules = reactive({
    username: [
        // 为空执行上行，输入执行下行
        { required: true, message: '请输入账号', trigger: 'blur' },
        { min: 3, max: 20, message: '账户长度3到20', trigger: 'blur' },
    ],
    password: [{ required: true, validator: validatePass, trigger: 'blur' }],
    fullname: [
        { required: true, message: '请输入名字', trigger: 'blur' },
        { min: 3, max: 5, message: '名字长度3到5', trigger: 'blur' },
    ],
    tel: [
        { required: true, message: '请输入手机号' },
        { pattern: /^1[3|4|5|7|8][0-9]{9}$/, message: '请输入正确手机号' },
    ],
    sex: [{ required: true, }],
    isAgree: [
        {
            required: true,
            message: 'Please select at least one activity type',
            trigger: 'change',
        },
    ],
})

//获取router实例对象
let router = useRouter();
//登录
function handleSubmit(formEl) {
    //校验整个表单
    formEl.validate(async (valid, fields) => {
        if (valid) {
            //通过校验
            let { status, msg, data } = await Admin.register({ ...form });
            if (status) {
                ElMessage.success(msg);
                router.push('/');
            } else {
                ElMessage.error(msg);
            }
        } else {
            //没通过校验
            console.log('校验失败字段', fields);
        }

    })
}
</script>
<style lang="less" scoped>
#bg {
    position: relative;
    min-height: 100vh;
    background: url(../assets/img/space.webp) top center;
    background-size: cover;

    .form-card {
        width: 400px;
        position: absolute;
        color: aliceblue;
        font-size: 16px;
        top: 50%;
        right: 30px;
        background-color: rgba(255, 255, 255, 0.1);
        box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(255, 255, 255, .5);
        border-right: 1px solid rgba(255, 255, 255, .2);
        border-bottom: 1px solid rgba(255, 255, 255, .2);
        border-radius: 10px;
        backdrop-filter: blur(50px);
        transform: translateY(-50%);

        span {
            font-size: 14px;
            padding: 5px;
        }

        .card-header span {
            font-size: 18px;
        }

        .form input {
            width: 300px;
            height: 30px;
            border: 0;
            outline: none;
            padding-left: 5px;
            background-color: rgba(255, 255, 255, 0.338);
            border-radius: 5px;
            margin: 0 0 10px 20px;
        }
    }
}
</style>